<!DOCTYPE html>
<!-- xmlns:xml的namespace 空间 编写代码的时候提示 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/jquery-3.6.0.min.js}"></script>
</head>

<body>
<span th:text="${userName}"></span><br/>
用户名:<span th:text="${user.userName}"></span><br/>
密码:<span th:text="${user.password}"></span><br/>
getUserInfo:<span th:text="${user.getUserInfo()}"></span><br/>
<br/>
<br/>
<br/>
<br/>
<!--ctx:<span th:text="${#ctx}" style="background-color: chartreuse"></span>-->
<!--vars:<span th:text="${#vars}" style="background-color: chartreuse"></span>-->
<!--locale:<span th:text="${#locale}" style="background-color: chartreuse"></span>-->
<!--request:<span th:text="${#request}" style="background-color: chartreuse"></span>-->
<!--response:<span th:text="${#response}" style="background-color: chartreuse"></span>-->
<!-- session默认是null 如果需要见到它的实例 需要在后台设置一些值-->
<!--session:<span th:text="${#session}" style="background-color: chartreuse"></span>-->
<!--
servletContext:<span th:text="${#servletContext}" style="background-color: chartreuse"></span>
sysConfig:<span th:text="${#servletContext.getAttribute('sysConfig')}" style="background-color: chartreuse"></span>
-->

<h3>内置的工具类</h3>
<span th:text="${#strings.length(userName)}"></span>
<span th:text="${#strings.toUpperCase('abcdef')}"></span>
<span th:text="${#dates.format(myDate,'yyyy-MM-dd HH:mm:ss')}"></span>

<h3>object表达式</h3>
<span th:object="${user}">
    用户名:<h1 th:text="*{userName}"></h1>
    密码:<p th:text="*{password}"></p>
</span>

<h3>链接表达式</h3>
<p>1、没有参数的 @/user/getById</p>
<a th:href="@{/getUser}">getUser 没有参数</a>
<p>2、有参数的 @/user/getByIdAndPassword(id=100,userName=张三)</p>
<a th:href="@{/getUser(id=100,userName=${userName},password='123456')}">getUser 有参数</a>
<h3>thymeleaf没法直接在页面中使用 但是可以使用[]</h3>
用户名:[[ ${user.userName} ]]<br/>
<h3>th属性可以使用在HTML的所有元素上</h3>
<input type="text" th:value="${user.userName}" th:id="${user.userName}"><br/>
<img th:src="${myImage}"><br/>
<h3>if unless相当于if else</h3>
<span th:if="${user.userName!=null}"> 不为空 </span><br/>
<span th:unless="${user.userName==null}"> 不为空 </span>

<h3>block标签:有时候我们希望在标签外部做一些操作 不会出现在最终生成HTML</h3>
<th:block th:each="user,stat:${users}">
[[${stat.index}]],[[ ${stat.count} ]],[[ ${stat.size} ]],
[[ ${stat.current} ]],[[ ${stat.even} ]],[[ ${stat.odd} ]],
[[ ${stat.first} ]],[[ ${stat.last} ]]、
<span  th:text="${user.userName}"></span><br/>
</th:block>
</body>

<script>
    $(function(){
        $("p").css("background-color","red")
        //在js中也可以使用它 [[ ${user.userName} ]]
        console.log('[[ ${user.userName} ]]')
        var un = '[[ ${user.userName} ]]'
        console.log('un -> ' + un)
    })
</script>

</html>